<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin:0 padding:0;}
	html{
		height:100%;
	}
	  body{
	  	background-color:#ccc;
	  	height:100%;
	  }
	  .container{
	  	height:100%;
	  	width:1200px;
	  	background-color:white;
	  	margin:0 auto;
	  }
	  h1{
	  	text-align:center;

	  }
	  .pic_wrap{
          width:880px;
          margin:0 auto;
	  }
	  /*.pic_wrap*/.box img{
			width:200px;
			height:200px;
	  }
	  .box{
			float:left;
			border:5px solid #ccc;
			margin-left:10px;
	  }
	  /*.pic_wrap .box:first-child{
						margin-left:0;
	  }*/
	  .box:hover{
					box-shadow:0 0 40px pink;
					margin:5px;
	  }
	  .clear{
	  	clear:both;
	  }
		
	</style>
</head>
<body>
	<div class="container">
		<h1>图片廊</h1>
		<div class="pic_wrap">
			<div class="box">
				<img src="./火影.jpg" alt=""><br>
				美丽的背影	
			</div>
			<div class="box">
				<img src="./火影.jpg" alt=""><br>
				美丽的背影
			</div>
			<div class="box">
				<img src="./火影.jpg" alt=""><br>
				美丽的背影
			</div>
			<div class="box">
				<img src="./火影.jpg" alt=""><br>
				美丽的背影
				<div class="clear"></div>
			</div>
		</div>
		
	</div>
</body>
</html>